<template>
	<transition 
		name="slide-fade" 
		@after-enter="afterEnter">
		<el-card 
			id="slide" 
			ref="slide" 
			:style="{ 'z-index': zIndex }" 
			:body-style="bodyStyle"
			class="slide-detail-card-container">
			<slot />
		</el-card>
	</transition>
</template>
<script type="text/javascript">
	import {
		getMaxIndex
	} from '@/utils/index'

	export default {
		name: 'SlideView', // 客户管理详情 滑动view
		components: {},
		props: {
			bodyStyle: {
				type: Object,
				default: () => {
					return {
						padding: 0
					}
				}
			},
			/** 监听点击事件 隐藏视图 */
			listenerIDs: {
				type: Array,
				default: () => {
					return []
				}
			},
			/** 阻挡点击事件 隐藏视图 */
			noListenerIDs: {
				type: Array,
				default: () => {
					return []
				}
			},
			noListenerClass: {
				type: Array,
				default: () => {
					return []
				}
			},
			appendToBody: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				zIndex: getMaxIndex()
			}
		},
		computed: {},
		watch: {},
		mounted() {
			if (this.appendToBody) {
				document.body.appendChild(this.$el)
			}
			this.listenerIDs.forEach(element => {
				if (document.getElementById(element)) {
					document
						.getElementById(element)
						.addEventListener('click', this.handleDocumentClick, false)
				}
			})
		},

		beforeDestroy() {
			if (this.appendToBody && this.$el && this.$el.parentNode) {
				this.$el.parentNode.removeChild(this.$el)
			}
		},
		methods: {
			handleDocumentClick(e) {
				var hidden = true
				this.noListenerIDs.forEach(element => {
					if (
						document.getElementById(element) &&
						document.getElementById(element).contains(e.target)
					) {
						hidden = false
					}
				})

				this.noListenerClass.forEach(element => {
					var items = document.getElementsByClassName(element)
					if (items && hidden) {
						for (let index = 0; index < items.length; index++) {
							const element = items[index]
							if (element.contains(e.target)) {
								hidden = false
								break
							}
						}
					}
				})

				if (
					document.getElementById('slide') &&
					document.getElementById('slide').contains(e.target)
				) {
					hidden = false
				}
				if (hidden) {
					this.$emit('side-close')
				}
			},
			afterEnter() {
				this.$emit('afterEnter')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.slide-fade-enter-active,
	.slide-fade-leave-active {
		will-change: transform;
		transition: all 0.35s ease;
	}

	.slide-fade-enter,
	.slide-fade-leave-to {
		transform: translateX(100%);
	}
</style>
